<!-- 审核卡券详情页面 -->
<template>
	<view class="wrapper">
		<view class="inner">
			<view class="title">{{ activityDetail.couponName }}</view>
			<view class="row" v-for="(item,index) in rows" :key="index">
				<view class="col">{{ item.label }}：</view>
				<gzMchImg v-if="item.type === 'img'" style="width: 296rpx;" :mchImg="activityDetail[item.key]" :mcc="activityDetail.mcc" class="col" />
				<view v-else-if="item.type === 'num'" class="col">{{ numberUtil.computeNumber(activityDetail[item.key] ?? 0,'/',100).result }}元</view>
				<view v-else class="col">{{ activityDetail[item.key] }}</view>
			</view>
		</view>
		<view class="btns">
			<button plain @click="onAuditHandle(2)">驳回</button>
			<button plain @click="onAuditHandle(1)">通过</button>
		</view>
	</view>
</template>

<script setup>
	import { ref, getCurrentInstance } from 'vue'
	import { onLoad} from '@dcloudio/uni-app'
	import numberUtil from '@/util/numberUtil';
	import { $mchActivityCouponInfo } from '@/http/apiManager.js'
	import { $mchActivityAudit } from '@/http/marketing/apiMarketing.js'
	
	const { $infoBox } = getCurrentInstance().appContext.config.globalProperties
	// 列表
	const rows = ref([
		{ label: '商户名称', key: 'mchName', type: 'text' },
		{ label: '商户号', key: 'mchNo', type: 'text' },
		{ label: '归属机构', key: 'agentNo', type: 'text' },
		{ label: '卡券名称', key: 'couponName', type: 'text' },
		{ label: '卡券使用门槛', key: 'payAmount', type: 'num' },
		{ label: '卡券优惠面额', key: 'couponPrice', type: 'num' },
		{ label: '卡券张数', key: 'couponNum', type: 'text' },
		{ label: '卡券每人可领取次数', key: 'everyoneMaxNum', type: 'text' },
		{ label: '开始时间', key: 'startTime', type: 'text' },
		{ label: '结束时间', key: 'endTime', type: 'text' },
		{ label: '商户头图', key: 'mchListImage', type: 'img' },
	])
	// activityDetail
	const activityDetail = ref({})
	
	onLoad(({ activityId, awardId, mchNo, auditRecordsId }) => {
		couponDetailHandle(activityId,awardId,mchNo,auditRecordsId)
	})
	
	// 请求卡券详情
	async function couponDetailHandle(activityId,awardId,mchNo,auditRecordsId){
		uni.showLoading({
			title: '加载中...',
			mask: true
		})
		const { bizData } = await $mchActivityCouponInfo({ activityId, awardId, mchNo })
		uni.hideLoading()
		Object.assign(activityDetail.value,{ ...bizData, activityId, auditRecordsId, awardId })	// 把审核ID加到活动详情
	}
	
	// 审核处理
	function onAuditHandle(state){
		const { activityId, auditRecordsId, awardId } = activityDetail.value
		if(state === 1){
			uni.showModal({
				title: '提示',
				content: '请确认是否通过该卡券？',
				async success({ cancel }) {
					if(cancel) return;
					launchAudit(auditRecordsId, activityId, state, awardId, '通过')	// 发起审核
				}
			})
		}else{	// 拒绝
			uni.showModal({
				title: '驳回原因',
				editable: true,
				placeholderText: '请输入驳回原因',
				async success({ cancel, content:remark }) {
					if(cancel) return;
					if(!remark){
						$infoBox.toast('请输入驳回原因')
						return
					}
					launchAudit(auditRecordsId, activityId, state, awardId, remark)	// 发起审核
				}
			})
		}
	}
	
	// 发起审核接口
	async function launchAudit(auditRecordsId, activityId, state, awardId, remark){
		uni.showLoading({
			title: '审核中...',
			mask: true
		})
		await $mchActivityAudit({ auditRecordsId, activityId, state, awardId, remark })
		$infoBox.toast('审核完成！',{ duration: 2000 })
		setTimeout(() => {
			uni.navigateBack()
		},2000)
	}
</script>

<style scoped lang="less">
	.wrapper{
		width: 100%;
		min-height: 100vh;
		background-color: #f5f7fb;
		box-sizing: border-box;
		position: relative;
		padding: 24rpx 32rpx;
		overflow: hidden;
		.inner{
			background-color: #fff;
			padding: 40rpx 20rpx;
			border-radius: 24rpx;
			display: flex;
			flex-direction: column;
			gap: 40rpx;
			.title{
				font-weight: 500;
			}
			.row{
				display: flex;
				gap: 20rpx;
				font-size: 28rpx;
				.col{
					&:nth-child(1){
						color: #999999;
					}
					&:nth-child(2){
						font-weight: 500;
					}
				}
			}
		}
		.btns{
			margin-top: 40rpx;
			width: 100%;
			display: flex;
			gap: 30rpx;
			button{
				border: none;
				line-height: initial;
				margin: initial;
				border-radius: 60rpx;
				text-align: center;
				flex: 1;
				padding: 32rpx 0;
				color: #fff;
				
				&:nth-child(1){
					background-color: #ff504c;
				}
				&:nth-child(2){
					background-color: #24c789;
				}
			}
		}
	}
</style>